<template>
  <!--<el-row class="add-home-container" :style="`background: url(${backgroundPath})`">-->
<div>
	<el-row class="add-home-container" :style="backgroundPath">
	  <div class="add-home-wrapper ">
	    <menu-container :themeOpacity="themeOpacity" :setting="setting" :dragOptions="dragOptions" />
	    <desktop-container
	      @openSetting="e => (this.setting = e)"
	      :themeOpacity="themeOpacity"
	      :dragOptions="dragOptions"
	      :dragAppIndex="dragAppIndex"
	    />
	    <task-panel :themeOpacity="themeOpacity" />
	  </div>
	  <SettingDrawer />
			
	</el-row>
</div>

</template>

<script>
  import SvgIcon from '@/components/SvgIcon'
  import MenuContainer from './components/MenuContainer'
  import DesktopContainer from './components/DesktopContainer'
  import TaskPanel from './components/TaskPanel'
  import { getItem, setItem } from '@/utils/localStorage.js'
  import SettingDrawer from '@/components/SettingDrawer'
  import { mixin } from '@/mixin'
  import store from '../../../store'
  export default {
    name: 'homeIndex',
    data() {
      return {
        setting: false,
        dragAppIndex: -1,
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 200,
          group: 'description',
          ghostClass: 'ghost'
        }
      }
    },
    mixins: [mixin],
    mounted() {
    },
    methods: {
	},
    watch: {
    },
    components: {
      SvgIcon,
      SettingDrawer,
      MenuContainer,
      DesktopContainer,
      TaskPanel,
    }
  }
</script>

<style lang="scss">
  @import '~@/assets/styles/variables.scss';
  .add-home-container {
    height: 100%;
    flex: 1;
    display: flex;
    background-size: 100% 100% !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    .header-contains {
      height: $nav-height;
      padding: 0 0px 0px 80px;
      line-height: $nav-height;
      background-size: 40px 40px;
      background: #3672fe url('~@/assets/images/nanchang-logo.png') no-repeat 20px center;
    }

    .add-home-wrapper {
      padding: 10px 20px;
      display: flex;
      width: 100%;
    }
  }

  .align-center {
    text-align: center;
  }

  .font-blue {
    color: #3672fe;
  }

  .font-gray {
    color: #999999;
  }
  .ellipis-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
